<template>
  <fragment>
    <div class="position-absolute t0 w-100 a">
      <search-bar />
    </div>
    <!-- s -->
    <!-- 图层 -->
    <modal-box
      v-show="$route.path != '/gisPage/healthCheck' && showLayer"
      :top="layerBoxTop + 'px'"
      left="70px"
      name="图层"
      bearing="1"
      classNames="layerBox"
      :showBox="true"
      @moving="changeMoveState"
      @close="closeLayer"
    >
      <floation-layer></floation-layer>
    </modal-box>

    <!-- 方位角 经纬度 -->
    <mobile-panel
      v-show="$route.path == '/gisPage/healthCheck'"
      top="20%"
      right="0px"
      :name="netName"
      bearing="2"
      classNames="laBox"
      @moving="changeMoveState"
    >
      <longitude-azimuth></longitude-azimuth>
    </mobile-panel>

    <!-- 网络覆盖率 -->
    <mobile-panel
      v-show="gisForm.routeAreaType == 2 && gisForm.network != '6+'"
      top="30%"
      right="0px"
      name="网络覆盖率"
      bearing="2"
      :showBox="true"
      classNames="coverageBox"
      @moving="changeMoveState"
    >
      <net-work-coverage></net-work-coverage>
    </mobile-panel>

    <!-- 搜索词列表 -->
    <!-- <mobile-panel
      v-show=" gisForm.keyWord != null && gisForm.keyWord != ''  && $route.path !='/gisPage/healthCheck'"
      top="30%"
      right="0px"
      :name="'搜索列表'"
      bearing="2"
      :showBox="true"
      classNames="keyWordBox"
      @moving="changeMoveState"
    >
      <search-word></search-word>
    </mobile-panel> -->

    <!-- 筛选列表 -->
    <mobile-panel
      v-show="
        [3, 4, 5].includes(routeAreaType) ||
        (routeAreaType == 1 && gisForm.network == '3+')
      "
      top="30%"
      right="0px"
      :name="getName.name"
      :zoneNames="getName.zoneNames"
      bearing="2"
      :showBox.sync="showFilterList"
      classNames="data-box"
      @moving="changeMoveState"
      @changeNav="changeNav"
    >
      <filter-panel></filter-panel>
    </mobile-panel>

    <!-- 详情列表 -->

    <modal-box
      v-show="
        routeAreaType == 5
          ? modalVisible
          : gisForm.userLineId != null &&
            gisForm.userLineDetails != null &&
            $route.path != '/gisPage/healthCheck' &&
            stateListStatus
      "
      top="30%"
      :right="routeAreaType == 5 ? '10px' : detailRight + 'px'"
      :name="
        routeAreaType == 5
          ? getName.zoneNames
          : gisForm.userLineDetails
          ? gisForm.userLineDetails.id == home.userInfoVo.cityId
            ? home.userInfoVo.cityName
            : gisForm.userLineDetails.name
          : null
      "
      bearing="2"
      :showBox="true"
      classNames="checked-details-box"
      @moving="changeMoveState"
      @close="closeBox"
    >
      <checked-details
        v-if="stateListStatus"
        :closeCharts.sync="closeCharts"
      ></checked-details>
    </modal-box>
    <!--网络评估 数据列表  -->
    <mobile-panel
      v-show="
        (routeAreaType == 2 && gisForm.network == '6+') ||
        (routeAreaType == 1 && gisForm.network == '7+')
      "
      top="30%"
      right="0px"
      :name="getName.name"
      :zoneNames="getName.zoneNames"
      bearing="2"
      :showBox.sync="showFilterList"
      classNames="dataNet-box"
      @moving="changeMoveState"
      @changeNav="changeNav"
    >
      <filter-net-panel></filter-net-panel>
    </mobile-panel>
    <!-- 左侧场景数据 -->
    <modal-box
      v-show="
        sceneStatus &&
        (routeAreaType == 1 || (gisForm.network == '6+' && routeAreaType == 2))
      "
      top="30%"
      left="70px"
      :name="`场景数据`"
      bearing="1"
      classNames="indicator-box"
      :showBox="true"
      @moving="changeMoveState"
      @close="closeSceneLayer"
    >
      <stateList></stateList>
    </modal-box>
    <!--  栅格数据 -->
    <modal-box
      v-show="routeAreaType == 2 && gridStatus && gisForm.network == '6+'"
      top="30%"
      left="70px"
      :name="`栅格数据`"
      bearing="1"
      classNames="gridStatus-box"
      :showBox="true"
      @moving="changeMoveState"
      @close="closeGridLayer"
    >
      <gridStateList></gridStateList>
    </modal-box>
    <modal-box
      v-show="routeAreaType == 5 && gisForm.indicatorType"
      bottom="20%"
      left="10px"
      :name="`监控指数 ${getName.townName}`"
      bearing="1"
      :showBox="true"
      classNames="indicator-box"
      @moving="changeMoveState"
      @close="closeBoxIndicator"
    >
      <broken-line-chart
        :closeCharts.sync="closeCharts"
        v-if="gisForm.indicatorType"
      ></broken-line-chart>
    </modal-box>

    <!-- 蒙层start -->
    <div class="mode-layer" v-show="isMove"></div>
    <!-- 蒙层end -->
  </fragment>
</template>

<script>
import SearchBar from './searchBar'
import MobilePanel from '@/components/gisPageComponents/mobilePanel'
import ModalBox from '@/components/gisPageComponents/modalBox/modalBox.vue'

import FloationLayer from './floationLayer'
import NetWorkCoverage from './netWorkCoverage'
import LongitudeAzimuth from './longitudeAzimuth'
import SearchWord from './searchWord'
import CheckedDetails from './checkedDetails'
import FilterPanel from './filterPanel'
import FilterNetPanel from './filterNetPanel'
import BrokenLineChart from './broken-line-chart/index.vue'
import StateList from './stateList'
import gridStateList from './gridStateList'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapState: mapStateForm, mapMutations: mapMutationsForm } =
  createNamespacedHelpers('gisForm')

export default {
  name: 'Comprehensive',
  components: {
    SearchBar,
    MobilePanel,
    FilterNetPanel,
    ModalBox,
    FloationLayer,
    FilterPanel,
    NetWorkCoverage,
    LongitudeAzimuth,
    SearchWord,
    CheckedDetails,
    BrokenLineChart,
    StateList,
    gridStateList
  },
  props: {},
  data: () => ({
    form: {},
    isMove: false,
    showBox: true,
    showCharts: true,
    closeCharts: false,

    echartsTabName: '1', //代表右侧echarts 的名字 label
    detailRight: 0,
    showFilterList: true,
    getNameData: []
  }),
  created() {},
  computed: {
    ...mapState(['home', 'gisForm']),
    ...mapStateForm([
      'showLayer',
      'layerBoxTop',
      'userLineId',
      'routeAreaType',
      'modalVisible',
      'stateListStatus',
      'sceneStatus',
      'gridStatus',
      'network'
    ]),
    netName() {
      const { perspective } = this.gisForm
      return perspective == 1 ? '经纬度分析' : '方位角分析'
    },
    getName() {
      const { cityName, cityId } = this.home.userInfoVo
      const {
        zoneId,
        townId,
        companyId,
        networkGridId,
        microGridId,
        zoneList,
        townList,
        networkGridList,
        microGridList,
        areaType,
        companyList
      } = this.gisForm
      let stateName = this.showFilterList ? '' : '数据'

      if (companyId !== null) {
        let networkGridItem = networkGridList.find(v => v.id == networkGridId)
        let companyItem = companyList.find(v => v.id == companyId)
        let microGridItem = microGridList.find(v => v.id == microGridId)
        let companyName = companyItem ? companyItem.name : null
        let networkGridName = networkGridItem ? networkGridItem.name : null
        let microGridName = microGridItem ? microGridItem.name : null
        let cn = cityName
        let com =
          companyId == cityId || companyId == '全部' ? '' : '>' + companyName
        let zn =
          networkGridId == null || networkGridId == '全部'
            ? ''
            : '>' + networkGridName
        let tn =
          microGridId == null || microGridId == '全部'
            ? ''
            : '>' + microGridName

        this.getNameData = [
          { name: cn, id: cityId, label: 'cityId' },
          {
            name: com.indexOf('>') === -1 ? '' : com.substr(1),
            id: companyId,
            label: 'companyId'
          },
          {
            name: zn.indexOf('>') === -1 ? '' : zn.substr(1),
            id: networkGridId,
            label: 'networkGridId'
          },
          {
            name: tn.indexOf('>') === -1 ? '' : tn.substr(1),
            id: microGridId,
            label: 'microGridId'
          }
        ]
        return { name: stateName, zoneNames: cn + com + zn + tn }
      } else {
        let zoneItem = zoneList.find(v => v.id == zoneId)
        let townItem = townList.find(v => v.id == townId)
        let zoneName = zoneItem ? zoneItem.name : null
        let townName = townItem ? townItem.name : null

        let cn = cityName
        let zn = zoneId == cityId || zoneId == '全部' ? '' : '>' + zoneName
        let tn = townId == null || townId == '全部' ? '' : '>' + townName
        // console.log( cityName, cityId,zoneName, townName, cn , zn, tn );
        this.getNameData = [
          { name: cn, id: cityId, label: 'cityId' },
          {
            name: zn.indexOf('>') === -1 ? '' : zn.substr(1),
            id: zoneId,
            label: 'zoneId'
          },
          {
            name: tn.indexOf('>') === -1 ? '' : tn.substr(1),
            id: townId,
            label: 'townId'
          }
        ]
        return { name: stateName, zoneNames: cn + zn + tn, townName }
      }
    }
    // getNameData() {
    //   return this.gisForm.userLineDetails.name
    // }
  },
  watch: {
    layerBoxTop(nv) {
      console.log(nv)
      let top = document.getElementsByClassName('layerBox')

      console.log(top, top[0].offsetTop)
    },
    userLineId(nv) {
      if (nv) {
        this.detailRight = 0
        // this.showFilterList = false;
      } else {
        this.detailRight = 1
      }
    },
    network(nv) {
      if (nv == '7+') {
        this.$store.commit('gisForm/setStateListStatus', false)
      } else if (this.routeAreaType != 2) {
        this.$store.commit('gisForm/setStateListStatus', true)
      }
    }
    // $route(to, from) {
    //   console.log(this)
    // }
  },
  beforeDestroy() {
    // window.location.reload()
  },
  mounted() {},
  methods: {
    ...mapMutationsForm([
      'setIndicatorType',
      'setModalFlag',
      'setType',
      'initBoundary',
      'setAllBoundaryType',
      'setBackType'
    ]),
    handleChange(e) {
      console.log(e)
      this.form = e
      this.showCharts = false
      this.$nextTick(() => {
        this.showCharts = true
      })
    },

    changeMoveState(nv) {
      this.isMove = nv
    },
    // 关闭详情框回调
    closeBox() {
      this.$store.commit('gisForm/setUserLineId', { data: null })
      // this.$store.commit('gisForm/setStateListStatus', false)
      this.setModalFlag(false)
    },
    // 关闭监控指数框回调
    closeBoxIndicator() {
      this.setIndicatorType(0)
    },
    // 关闭图层
    closeLayer() {
      this.$store.commit('gisForm/setShowLayer', false)
    },
    closeSceneLayer() {
      this.$store.commit('gisForm/setSceneStatus', false)
    },
    closeGridLayer() {
      this.$store.commit('gisForm/setGridStatus', false)
    },
    // 跳转筛选列表导航
    changeNav(name) {
      let list = this.getNameData
      const { zoneId, networkGridId, townId, microGridId } = this.gisForm
      let navItem = list.find(v => v.name == name)
      // this.$store.commit('gisForm/setStateListStatus', true)
      // 修改筛选项
      if (navItem.label == 'cityId') {
        // 筛选项选择全部
        let str = networkGridId !== null ? 'setNetworkGridId' : 'setZoneId'
        this.$store.commit('gisForm/' + str, { data: navItem.id, ifNav: true })
      } else if (
        navItem.label == 'zoneId' ||
        navItem.label == 'networkGridId'
      ) {
        let str = networkGridId !== null ? 'setMicroGridId' : 'setTownId'
        if (this.routeAreaType == 5 && str == 'setTownId') {
          this.$store.commit('gisForm/' + str, { data: '全部' })
        } else {
          this.$store.commit('gisForm/' + str, { data: '全部', ifNav: true })
        }
      }
      if (
        this.routeAreaType == 5 &&
        (navItem.label == 'zoneId' || navItem.label == 'cityId')
      ) {
        this.setIndicatorType(0)
        this.setModalFlag(false)
        if (navItem.label == 'zoneId') {
          this.$store.commit('gisForm/setZoneId', {
            data: navItem.id,
            getBoundary: this.routeAreaType == 5
          })
        }
        if (navItem.label == 'cityId') {
          window.location.reload()
          // this.setType(11)
          // this.initBoundary()
          // this.setAllBoundaryType(null)
          // this.setBackType(1)
        }
      } else {
        // 跳转到相应点
        this.$store.commit('gisForm/setUserLineId', {
          data: navItem.id,
          jumpMap: true,
          ifNav: true,
          navItem
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.line_chart {
  background: #f6f5fa;
  padding: 5px;
}

/* 蒙层 */
.mode-layer {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.close-icon {
  position: relative;
  width: 0;
  > i {
    position: absolute;
    right: 6px;
    top: 11px;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
